<template>
    <div>
        <div class="px-4 my-4 mb-8">
            <el-page-header :icon="ArrowLeft" @back="router.back()">
                <template #breadcrumb>
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item>知识库管理</el-breadcrumb-item>
                        <el-breadcrumb-item>{{
                            currentKbInfo.title
                        }}</el-breadcrumb-item>
                    </el-breadcrumb>
                </template>
                <template #content>
                    <span class="text-2xl font-600">
                        {{ '知识库详情' }}
                    </span>
                </template>
            </el-page-header>
        </div>
        <!-- <div class="m-4 text-2xl">知识库文件管理</div> -->
        <div class="m-4">
            <avue-crud
                ref="crudRef"
                :option="option"
                :data="data"
                @row-save="rowSave"
                @row-del="rowDel"
                @search-change="searchChange"
                @search-reset="resetChange"
                @refresh-change="refreshChange"
            >
                <template #menu-left>
                    <el-button
                        type="primary"
                        :icon="Upload"
                        @click="
                            router.push(
                                `/admin/knowledge-base/${currentKbInfo.id}/file/upload`
                            )
                        "
                        >上传</el-button
                    >
                </template>
            </avue-crud>
        </div>
    </div>
</template>

<script setup lang="ts">
import { DBKeys, add, getList } from '@/apis/commonCrud'
import { delKnowledgeBaseFile } from '@/apis/knowledgeBase'
import { ArrowLeft, Upload } from '@element-plus/icons-vue'
import type { AvueCrudOption } from '@smallwei/avue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { knowledgeFileColumn } from './columnFile'

const router = useRouter()
const route = useRoute()

const option = ref<AvueCrudOption>({
    index: true,
    editBtn: false,
    addBtn: false,
    column: knowledgeFileColumn,
})
const data = ref([])
const searchParams = ref({
    page: 1,
    pageSize: 10,
})
const currentKbInfo = ref<any>({})

const dbName: DBKeys = 'knowledgeBaseFiles'

const getCurrentKbInfo = async () => {
    const knowledgeBaseId = route.params.id
    if (!knowledgeBaseId) return
    const res = await getList('knowledgeBases', {
        id: knowledgeBaseId,
    })
    if (!res.success) {
        ElMessage.error('获取数据失败')
        return
    }
    currentKbInfo.value = res.data.rows[0]
}

const getData = async (sParams = searchParams.value) => {
    const knowledgeBaseId = route.params.id
    if (!knowledgeBaseId) return
    const res = await getList(dbName, {
        ...sParams,
        page: 1,
        pageSize: 100,
        knowledgeBaseId,
    })
    if (!res.success) {
        ElMessage.error('获取数据失败')
        return
    }
    data.value = res.data.rows
}

getData()
getCurrentKbInfo()

const rowSave = async (form, done, loading) => {
    const res = await add(dbName, form)
    loading()
    if (!res.success) {
        ElMessage.error('添加失败')
        return
    }
    ElMessage.success('添加成功')
    await getData()
    done()
}

const rowDel = async (row, _index, done) => {
    const confirm = await ElMessageBox.confirm('确定要删除吗？')
    if (confirm !== 'confirm') {
        done()
        return
    }
    if (!currentKbInfo.value.collectionName) {
        ElMessage.error('参数错误')
        done()
        return
    }
    const res = await delKnowledgeBaseFile({
        id: row.id,
        knowledgeBaseId: row.knowledgeBaseId,
        collectionName: currentKbInfo.value.collectionName,
        url: row.url
    })
    if (!res.success) {
        ElMessage.error('删除失败')
        return
    }
    ElMessage.success('删除成功')
    await getData()
    done()
}

const resetChange = () => {
    const newSearchParams = {
        page: 1,
        pageSize: 100,
    }
    searchParams.value = newSearchParams
}

const searchChange = async (params, done) => {
    const newSearchParams = {
        page: 1,
        pageSize: 100,
        ...params,
    }
    searchParams.value = newSearchParams
    await getData(newSearchParams)
    done()
}
const refreshChange = () => {
    getData()
}
</script>

<style scoped></style>
